<template>
  <view>
    <view class="item-wrapper">
      <view v-for="item in state.pagination.data" :key="item.id"  class="pro-box" @tap="onDetail(item.id)">
        <view class="pro-box-t">
          <view class="pro-box-t-1">十里飘香</view>
          <view class="pro-box-t-2">
            <image src="@/static/img/home-icon-7.png"></image>
            <view style="width: 100%;">
              <view class="pro-box-t-2-text">
                <text>发行方</text>
                <text>九玄官方</text>
              </view>
              <view class="pro-box-t-2-text">
                <text>当前价格</text>
                <text>500</text>
              </view>
              <view class="pro-box-t-2-text">
                <text>孵化周期</text>
                <text>7天</text>
              </view>
              <view class="pro-box-t-2-text">
                <text>孵化上限</text>
                <text>30份</text>
              </view>
            </view>
          </view>
        </view>
        <view class="pro-box-b">
          <text>当前挂单：2000</text>
          <text>距离下轮拆配还有(260)天 ></text>
        </view>
      </view>
    </view>
    <s-empty
      v-if="state.pagination.total==0"
      text="这里是空的哦~"
      icon="/static/empty.png"
    />
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </view>
</template>

<script setup>
	import sheep from '@/sheep';
  import { onMounted, reactive } from 'vue';
  import _ from 'lodash';

  onMounted(async () => {
    getData();
  });
  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
  });

  async function getData(page = 1, list_rows = 10, keyword) {
    state.loadStatus = 'loading';
    let res = await sheep.$api.brand.incubationList({
      list_rows,
      page,
      keyword,
    });
    if (res.code === 1) {
      let orderList = _.concat(state.pagination.data, res.data.data);
      state.pagination = {
        ...res.data,
        data: orderList,
      };
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getData(state.pagination.current_page + 1);
    }
  }
  function onDetail(id) {
    sheep.$router.go('/pages/inherit/brandIncubationDetails', { id });
  }
</script>

<style lang="scss" scoped>
  @mixin flex($align-item: center, $justify-content: space-between) {
    display: flex;
    align-items: $align-item;
    justify-content: $justify-content;
  }

  .item-wrapper {
    padding: 0 30rpx;
  }

  .pro-box {
    width: 100%;
    background: #1E1E1E;
    border-radius: 20rpx;
    margin-bottom: 22rpx;

    .pro-box-t {
      padding: 30rpx;

      .pro-box-t-1 {

        font-weight: 400;
        font-size: 26rpx;
        color: #EBEBEB;
        margin-bottom: 22rpx;
      }

      .pro-box-t-2 {
        @include flex(center, none);

        font-weight: 400;
        font-size: 22rpx;
        color: #EBEBEB;

        image {
          width: 180rpx;
          height: 180rpx;
          min-width: 180rpx;
          margin-right: 25rpx;
        }

        .pro-box-t-2-text {
          @include flex();
          margin: 15rpx 0;
        }
      }
    }

    .pro-box-b {
      @include flex();
      border-top: 1px solid #5B5B5B;
      padding: 30rpx;

      font-weight: 400;
      font-size: 24rpx;
      color: #EBEBEB;
    }
  }
</style>
